<template>
  <div class="home">
    <div class="balls ball-red">
      <h3 class="ball-red--title">红球（请选择6个）</h3>
      <div class="select-balls">
        <ul>
          <li v-for="b in redBalls" class="select-balls--red" :key="b.value" @click="SelectRedBall(b)" :class="{'selected': !!b.selected, 'pulse': !!b.pulsed}">{{b.value}}</li>
        </ul>
      </div>
    </div>

    <div class="balls ball-blue">
      <h3 class="ball-blue--title">篮球（请选择1个）</h3>
      <div class="select-balls">
        <ul>
          <li v-for="b in blueBalls" class="select-balls--blue" :key="b.value" @click="SelectBlueBall(b)" :class="{'selected': !!b.selected, 'pulse': !!b.pulsed}">{{b.value}}</li>
        </ul>
      </div>
    </div>

    <div class="btn">
      <van-button type="primary" round block @click="submit">确定</van-button>
    </div>

    <div class="panel" v-show="isShowResult">
      <van-panel title="查询信息" :desc="desc" :status="status" ></van-panel>
    </div>
  </div>
</template>

<script>
// import HelloWorld from '@/components/HelloWorld.vue'
// import axios from 'axios'

export default {
  name: 'Home',
  data () {
    return {
      redBalls: [],
      selectedRedBalls: [],
      blueBalls: [],
      selectedBlueBalls: [],
      result: {
        desc: '',
        status: ''
      },
      numbers: {
        red: [1, 11, 2, 22, 3, 33],
        blue: 16
      },
      isShowResult: false,
      status: '',
      desc: ''
    }
  },
  methods: {
    SelectRedBall (b) {
      b.selected = !b.selected
      b.pulsed = true
      setTimeout(() => {
        b.pulsed = false
      }, 300)

      if (b.selected) {
        if (this.selectedRedBalls.length >= 6) {
          b.selected = false
          return alert('选择的红色球已超出六个！')
        }
        this.selectedRedBalls.push(b)
      } else {
        this.selectedRedBalls = this.selectedRedBalls.filter(i => {
          return i.value !== b.value
        })
      }
    },

    SelectBlueBall (b) {
      b.selected = !b.selected
      b.pulsed = true
      setTimeout(() => {
        b.pulsed = false
      }, 300)

      if (b.selected) {
        if (this.selectedBlueBalls.length >= 1) {
          b.selected = false
          return alert('选择的蓝色球已超出一个！')
        }
        this.selectedBlueBalls.push(b)
      } else {
        this.selectedBlueBalls = this.selectedBlueBalls.filter(i => {
          return i.value !== b.value
        })
      }
    },

    submit () {
      if (this.selectedRedBalls.length !== 6 || this.selectedBlueBalls.length !== 1) {
        return alert('请选择正确的球号码')
      }

      const redBalls = []
      const blueBalls = this.selectedBlueBalls[0].value
      this.selectedRedBalls.forEach(i => {
        redBalls.push(i.value)
      })

      if (redBalls.sort().toString() === this.numbers.red.sort().toString() && blueBalls === this.numbers.blue) {
        this.isShowResult = true
        this.desc = '第 xxx 期出现该号码'
        this.status = '存在'
      } else {
        this.isShowResult = true
        this.desc = '历史期号中没有出现该号码'
        this.status = '不存在'
      }
    }
  },

  created () {
    for (let i = 0; i < 33; i++) {
      this.redBalls.push({
        value: i + 1,
        selected: false,
        pulsed: false
      })
    }

    for (let i = 0; i < 16; i++) {
      this.blueBalls.push({
        value: i + 1,
        selected: false,
        pulsed: false
      })
    }
  }
}
</script>

<style lang="stylus">

.ball-red--title
  color #e73030
  text-align center

.select-balls
  padding 0 15px
  li
    display inline-block
    width 35px
    height 35px
    line-height 35px
    background-color #fff
    border-radius 50%
    border 1px solid #eaeaea
    text-align center
    font-size 15px
    margin 2px
    animation-duration .6s
    animation-fill-mode both
    &.pulse
      animation-name pulse

.select-balls--red
  color #f21314
  &.selected
    background-color #f21314
    color #fff

.ball-blue--title
  color #1290e3
  text-align center

.select-balls--blue
  color #1290e3
  &.selected
    background-color #1290e3
    color #fff

.btn
  width 80%
  margin 40px auto 0

.panel
  margin-top 12px

@keyframes pulse
    0% { transform: scale(1.3); }
  50% { transform: scale(1.3); }
    100% { transform: scale(1.3); }

</style>
